<template>
    <div>
        <el-card>
            <div slot="header">
                <span>交通运行指标</span>
                <el-tag class="fl-r">正常</el-tag>
            </div>
            <div class="content">
                <div id="carFlowMap" style="width: 100%;height: 100%;"></div>
                <!-- <div id="typeMap" style="width: 100%;height: 100%;"></div>
                <div id="speedMap" style="width: 100%;height: 100%;"></div>
                <div id="occupancyMap" style="width: 100%;height: 100%;"></div> -->
            </div>
            <HR align=center width='100%' color=#987cb9 SIZE=1 style="margin: 10px 0px;"/>
            <div style="text-align: center;">
                <el-button>数据刷新</el-button>
                <el-button>统计报表</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>

import echarts from 'echarts'

import reportService from '../../../services/reportService'

export default {

    data(){
        return{
            data: {}
        }
    },


    props: {
        // tunnelcode: {
        //     type: 'Strting',
        //     required: true
        // }
    },

    mounted(){
        let _this = this
        reportService.getcarData().then(res => {
            _this.res = res
            _this.carFlowMapChart()
        })
    },

    wahch: {
        // tunnelcode (n, o){
            // reportService.
        // }
    },

    methods: {

        carFlowMapChart(){
            // 基于准备好的dom，初始化echarts实例
			let yichangChart = echarts.init(document.getElementById('yichangChart'))
			// window.onresize = yichangChart.resize;
            window.addEventListener("resize", () => { yichangChart.resize();});
			// 绘制图表
			let option = {
					// backgroundColor:'',
					tooltip : {
							trigger: 'axis',
							axisPointer : {            // 坐标轴指示器，坐标轴触发有效
									type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
							}
					},
					legend: {
							// data: ['设备总数', '异常数量'],
							// width: 50
					},
					grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true,
							// x: 50
					},
					xAxis:  {
							type: 'value'
					},
					yAxis: {
							type: 'category',
							data: this.yAxis
					},
					series: [
							{
									name: '异常数量',
									type: 'bar',
									stack: '总量',
									label: {
											normal: {
													// show: true,
													position: 'insideRight'
											}
									},
									data: this.fault
							},
							{
									name: '设备总数',
									type: 'bar',
									stack: '总量',
									label: {
											normal: {
													// show: true,
													position: 'insideRight'
											}
									},
									data: this.total
							}
					]
			};
			yichangChart.setOption(option);
        },
    }


}
</script>
<style lang="scss" scoped>

.fl-r{
    float: right;
}

.content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.content-item{
    text-align: center;
}
</style>
